import React, { useState } from 'react'

export default function FormCom() {
  //1. 声明状态
  let [xingzuo, setXingzuo] = useState('');
  let [shuxiang, setShuxiang] = useState('');

  //3. 声明 onChange 事件回调
  let saveXingzuo = (e) => {
    setXingzuo(e.target.value);
  };

  return (
    <div>
      <h2>测试表单</h2>
      <hr />
      {/* 2. 为 input 元素设置 value 属性, 且值为状态的值 */}
      星座: <input type="text" value={xingzuo} onChange={saveXingzuo} /><br></br>
      属相: <input type="text" value={shuxiang} onChange={e => setShuxiang(e.target.value)} /><br />
      <hr />
      <button onClick={() => {
        console.log(`当前的星座是 ${xingzuo}, 属相是: ${shuxiang}`)
      }}>测试</button>
    </div>
  )
}
